<template>
    <div style="width: 100%;display: flex;justify-content: center;font-size: 32px;margin-bottom: 30px;">欢迎来到宠家管理系统</div>
  <div class="container">
    <div class="item">
        <div style="margin-bottom: 20px;font-size:28px">{{ data.usernum }}</div>
        <div>用户数</div>
    </div>
    <div class="item">
        <div style="margin-bottom: 20px;font-size:28px">{{ data.accountnum }}</div>
        <div>人员数</div>
    </div>
    <div class="item">
        <div style="margin-bottom: 20px;font-size:28px">{{ data.ordernum }}</div>
        <div>成交数</div>
    </div>
    <div class="item">
        <div style="margin-bottom: 20px;font-size:28px">{{ data.ordersum }}</div>
        <div>营业额</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive,onBeforeMount} from 'vue'
import {getdata} from '../service/api/data'
let data=ref({})
onBeforeMount(()=>{
    getdata().then(res=>{
        if(res.data.code===200){
            data.value=res.data.data
        }
    })
})
</script>


<style lang="scss" scoped>
.container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .item{
        width: 200px;
        height: 200px;
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 6px 32px -7px rgba(0, 0, 0, 0.75);
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>
